react-transition-group

What is react-transition-group?

The react-transition-group package provides a way to perform animations and transitions in React applications. It offers components that manage the lifecycle of entering and leaving the DOM, allowing developers to animate these changes.

What are react-transition-group's main functionalities?

Transition

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. The 'in' prop is used to toggle the visibility of the component.

import { Transition } from 'react-transition-group';

<Transition in={this.state.show} timeout={300}>
  {state => (
    <div className={`fade fade-${state}`}>{this.props.children}</div>
  )}
</Transition>

CSSTransition

The CSSTransition component is a wrapper around the Transition component that lets you define enter and exit transitions using CSS class names. It's useful when you want to apply a set of CSS transitions to a single entering or leaving element.

import { CSSTransition } from 'react-transition-group';

<CSSTransition in={this.state.show} timeout={300} classNames='fade'>
  <div>{this.props.children}</div>
</CSSTransition>

TransitionGroup

The TransitionGroup component manages a set of transition components (like CSSTransition) in a list. When items are added or removed from the list, the TransitionGroup will trigger the enter or exit states for those items.

import { TransitionGroup, CSSTransition } from 'react-transition-group';

<TransitionGroup>
  {this.state.items.map(item => (
    <CSSTransition key={item.id} timeout={500} classNames='item'>
      <div>{item.text}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

SwitchTransition

The SwitchTransition component is used to transition between two elements that switch out with each other. It's useful for transitioning between two components that enter and leave at the same time, like routes or toggling views.

import { SwitchTransition, CSSTransition } from 'react-transition-group';

<SwitchTransition>
  <CSSTransition key={this.state.mode} addEndListener={(node, done) => node.addEventListener('transitionend', done, false)} classNames='fade'>
    <div>{this.state.status}</div>
  </CSSTransition>
</SwitchTransition>

Other packages similar to react-transition-group

framer-motion

Framer Motion is a popular animation library for React that provides more advanced animation capabilities and a simpler API compared to react-transition-group. It includes features like spring physics, gesture animations, and more.

react-spring

React Spring is a spring-physics based animation library that is similar to react-transition-group but focuses on providing a more natural motion. It allows for a wide range of animations, including from/to and looped animations.

react-motion

React Motion is a library that provides a powerful way to create animations using spring configurations. It is more low-level compared to react-transition-group and gives developers more control over the animation's physics.

react-flip-toolkit

React Flip Toolkit is a library that specializes in flip animations which can be used for animating lists, grids, and other collections of elements. It compares to react-transition-group by providing more specialized features for flip transitions.

README

react-transition-group

ATTENTION! To address many issues that have come up over the years, the API in v2 is not backwards compatible with the original React addon (v1-stable).

For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release. Documentation and code for that release are available on the v1-stable branch.

We are no longer updating the v1 codebase, please upgrade to v2 when possible

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

Documentation

• Main documentation
• Migration guide from v1

Examples

Clone the repo first:

[e-mail]:reactjs/react-transition-group.git

Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the examples.